<template>
  <div class="result-box flex-row-between height-100-percent flex-wrap">
    <div class="flex-col-center  height-100-percent flex-1">
<!--      饼图-->

      <div class="result-row flex-row-center">
          <pie-echart  title="练习结果" :data="pieDataList" width="100%" height="200px"></pie-echart>
      </div>
<!--      统计结果-->
      <div class="result-row flex-row-center"  >
        <el-statistic  :value="total" class="margin-row-10">
          <template #title>
            <div class="flex-row-center">
              <el-icon :size="14"><Histogram /></el-icon>
              <span>
                 共计
               </span>
            </div>
          </template>
        </el-statistic>
        <el-statistic :value="rightNum" class="margin-row-10">
          <template #title>
            <div class="flex-row-center">
              <el-icon :size="14"><Select /></el-icon>
              <span>
                 正确
               </span>
            </div>
          </template>
        </el-statistic>
        <el-statistic :value="errorNum" class="margin-row-10">
          <template #title>
            <div class="flex-row-center">
              <el-icon :size="14"><CloseBold /></el-icon>
              <span>
                 错误
               </span>
            </div>
          </template>
        </el-statistic>
        <el-statistic :value="rightNum/total*100" class="margin-row-10">
          <template #title>
            <div class="flex-row-center">
              <el-icon :size="14"><Aim /></el-icon>
              <span>
                  正确率
                </span>
            </div>
          </template>
          <template #suffix>
            %
          </template>
        </el-statistic>

      </div>
    </div>
    <div class="flex-col-center height-100-percent flex-1">
      <!--    放具体记录的盒子-->
      <div class="flex-col-center-start width-80-percent" style="overflow-y: scroll">
<!--        行-->
        <div class="flex-row-start-center width-100-percent flex-wrap"
             v-for="(row,i) in computedRowList" :key="i">
            <record-item v-for="(item,index) in row" :key="index" :item="item" class="flex-1"></record-item>
        </div>
<!--        <el-row justify="space-around" v-for="(row,i) in computedRowList" :key="i" class="width-100-percent" >-->
<!--          <el-col v-for="(item,index) in row" :key="index" :span="24/recordItemCol">-->
<!--            <record-item :item="item" :key="index"></record-item>-->
<!--          </el-col>-->
<!--        </el-row>-->

      </div>
<!--      评分-->
      <div class="result-remark flex-col-center">
        <h3 class="width-100-percent flex-row-start-center">最终评分:</h3>
        <ResultRate :score="computedScore" :size="30"></ResultRate>
        <div class="font-size-12 color-gray">( {{computedScoreRemark}} )</div>
      </div>
    </div>
  </div>
<!--  <div class="result-box flex-col-center-start" >-->
<!--    <div class="result-remark flex-col-center">-->
<!--      <h3 class="width-100-percent flex-row-start-center">最终评分:</h3>-->
<!--     <ResultRate :score="computedScore" :size="30"></ResultRate>-->
<!--      <div class="font-size-12 color-gray">( {{computedScoreRemark}} )</div>-->
<!--    </div>-->
<!--    <div class="result-row flex-row-center">-->
<!--      <pie-echart  title="练习结果" :data="pieDataList" width="100%" height="200px"></pie-echart>-->
<!--    </div>-->
<!--    <div class="result-row flex-row-center" >-->
<!--      <el-statistic  :value="total" class="margin-row-10">-->
<!--        <template #title>-->
<!--          <div class="flex-row-center">-->
<!--            <el-icon :size="14"><Histogram /></el-icon>-->
<!--            <span>-->
<!--                 共计-->
<!--               </span>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-statistic>-->
<!--      <el-statistic :value="rightNum" class="margin-row-10">-->
<!--        <template #title>-->
<!--          <div class="flex-row-center">-->
<!--            <el-icon :size="14"><Select /></el-icon>-->
<!--            <span>-->
<!--                 正确-->
<!--               </span>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-statistic>-->
<!--      <el-statistic :value="errorNum" class="margin-row-10">-->
<!--        <template #title>-->
<!--          <div class="flex-row-center">-->
<!--            <el-icon :size="14"><CloseBold /></el-icon>-->
<!--            <span>-->
<!--                 错误-->
<!--               </span>-->
<!--          </div>-->
<!--        </template>-->
<!--      </el-statistic>-->
<!--      <el-statistic :value="rightNum/total*100" class="margin-row-10">-->
<!--        <template #title>-->
<!--          <div class="flex-row-center">-->
<!--            <el-icon :size="14"><Aim /></el-icon>-->
<!--            <span>-->
<!--                  正确率-->
<!--                </span>-->
<!--          </div>-->
<!--        </template>-->
<!--        <template #suffix>-->
<!--          %-->
<!--        </template>-->
<!--      </el-statistic>-->

<!--    </div>-->
<!--    &lt;!&ndash;    放具体记录的盒子&ndash;&gt;-->
<!--    <div class="flex-row-center margin-col-10 flex-wrap width-80-percent" style="overflow-y: scroll">-->
<!--      <record-item :item="item" v-for="(item,index) in props.list" :key="index"></record-item>-->
<!--    </div>-->
<!--  </div>-->
</template>

<script setup lang="ts">


import {RecordItem as RecordItemType, RecordStatus} from "@/ts/record";
import {computed, defineProps, ref} from "vue";
import RecordItem from "@/components/record/RecordItem.vue";
import {Aim, CloseBold, Histogram} from "@element-plus/icons";

import PieEchart from "@/components/chart/PieEchart.vue";
import {ChartData} from "@/ts/chart";
import ResultRate from "@/components/result/ResultRate.vue";
import {parseTwoDimensionalArray} from "@/utils/ArrayUtil";


let props = defineProps<{
    list:Array<RecordItemType>
  }>();
// 记录项列数
let recordItemCol=ref(5)
  // 总数
  let total=computed(()=>props.list.length)
  // 正确个数
  let rightNum=computed(()=>{
     let num=0
     props.list?.forEach(item=>{
       num+= item.status === RecordStatus.SUCCESS?1:0
     })
    return num
  })
  // 错误个数
  let errorNum=computed(()=>{
    let num=0
    props.list?.forEach(item=>{
      num+= item.status === RecordStatus.ERROR?1:0
    })
    return num
  })
  // 传递的饼图数据
  let pieDataList=computed(()=>{
    console.log('a')
    let lst:Array<ChartData>=[]
    lst.push({
      name:"正确",
      value:rightNum.value

    })
    lst.push({
      name:"错误",
      value:errorNum.value
    })
    let left=total.value - rightNum.value - errorNum.value
    if( left>0 ){
      lst.push({
        name:"未知",
        value:left
      })
    }
    return lst
  })

  let computedScore=computed(()=>{
    return Math.floor(rightNum.value/total.value*100)
  })

  let computedScoreRemark=computed(()=>{
    let score = computedScore.value;
    if(score <=60){
      return '挺不错!但还需努力!'
    }else if(score <= 80){
      return '太厉害了!'
    }else{
      return '优秀至极!'
    }
  })

  let computedRowList=computed(()=>{

    return parseTwoDimensionalArray<RecordItemType>(props.list,recordItemCol.value)
    // let lst:Array<RecordItemType[]>=[]
    // let tmp:Array<RecordItemType>=[]
    // props.list.forEach((item,index)=>{
    //   tmp.push(item)
    //   if((index+1) % col === 0 || index === props.list.length-1){
    //     lst.push(tmp)
    //     tmp=[]
    //   }
    // })
    // return lst

  })
</script>

<style scoped lang="less">
  .result-box{
    position: relative;
    padding: 20px;
    border-radius: 30px;
    .result-remark{

    }
    span{
      margin-left: 3px;
    }
    .result-row{
      width: 100%;
      margin-top: 10px;
    }

  }
//::-webkit-scrollbar{
//  width: 2px;
//  height: 10px;
//}
</style>